<template>
  <div class="user f16r ovh">
    <header class="bs rel tc bcwh">
      <!-- 姓名区域 -->
      <section class="account rel bb1 pb10r">
        <img class="brc mt10r mb10r vt i50r" src="https://ws1.sinaimg.cn/large/0069WcBigy1fnn5zfr5wsj302s02rglv.jpg">
        <div class="name">
          <i class="icon-fa-venus cg"></i>
          {{name}}
        </div>
        <!-- 更多 -->
        <div class="more abs">
          <router-link :to="{name: 'profile'}" class="icon-fa-cog" tag="i"></router-link>
        </div>
      </section>
      <!-- 入口区域 -->
      <section class="entry">
        <div class="collection br1 h40r lh40r">
          <i class="icon-fa-heart"></i>
          <span>{{collection}}收藏</span>
        </div>
        <div class="watch h40r lh40r">
          <i class="icon-fa-eye"></i>
          <span>{{watch}}关注</span>
        </div>
      </section>
    </header>
    <nav class="list bcwh mt10r mb10r bs">
      <!-- 路由 -->
      <router-link tag="div" to="user/chatRecord" class="list-item">
        <i class="icon-fa-commenting-o" style="color:rgb(204, 138, 9)"></i>
        <span class="text">我的消息</span>
        <mt-badge size="small" color="#f00">10</mt-badge>
        <i class="icon-fa-angle-right right"></i>
      </router-link>
      <!-- 路由 -->
      <router-link tag="div" to="user/order" class="list-item">
        <i class="icon-fa-wpforms" style="color:rgb(102, 102, 102)"></i>
        <span class="text">我的预约</span>
        <i class="icon-fa-angle-right right"></i>
      </router-link>
      <!-- 路由 -->
      <div class="list-item">
        <i class="icon-fa-home" style="color:rgb(252, 123, 83)"></i>
        <span class="text">我的房源</span>
        <i class="icon-fa-angle-right right"></i>
      </div>
    </nav>
    <nav class="list bcwh mb10r bs">
      <router-link :to="{name: 'policies'}" tag="div" class="list-item">
        <i class="icon-fa-circle" style="color:rgb(74, 165, 240)"></i>
        <span class="text">服务条款</span>
        <i class="icon-fa-angle-right right"></i>
      </router-link>
    </nav>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        collection: 22,
        watch: 33,
        name: "妮可"
      }
    }
  }
</script>

<style lang="stylus">
.user 
  .account .more
    right: .4rem
    top: .2rem
  .entry
    display: flex
    // display: none
    .collection, .watch
      flex: 1
  .list-item
    height: 1.6rem
    line-height: 1.6rem
    padding: 0 .4rem
    &:not(:last-child)
      border-bottom: 1px solid #eee
    >i
      width: .8rem
</style>
